/* 轮播容器基本样式（视窗层） */
.slider {
    width: 700px;        
    height: 450px;       /* 固定高度 */
    margin: 0 auto;      /* 水平居中 */
    overflow: hidden;    /* 隐藏超出部分，形成"视窗"效果 */
    position: relative;  /* 为子元素绝对定位提供参照 */
    border: 2px solid #333;  /* 可视化的边框 */
}
        
/* 轮播图片容器（胶片层） */
.slides {
    width: 500%;         /* 5倍宽度（5张图片） */
    height: 100%;        /* 继承父容器高度 */
    display: flex;      /* 弹性布局实现横向排列 */
    animation: lunbo 15s infinite;  /* 应用动画：名称/时长/无限循环 */
}
        
/* 单张幻灯片样式 */
.slide {
    width: 20%;          
    height: 100%;        /* 继承父容器高度 */          
    background-size: cover;      /* 背景图覆盖整个元素 */   
	background-image: url(../img/slide1.jpg);
}
.slide:nth-child(2) {
    background-image: url(../img/slide2.jpg); 
}
.slide:nth-child(3) {
    background-image: url(../img/slide3.jpg); 
}
.slide:nth-child(4) {
    background-image: url(../img/slide4.jpg); 
}
.slide:nth-child(5) {
    background-image: url(../img/slide5.jpg); 
}
    
 /* 轮播动画关键帧 */
@keyframes lunbo {
    /* 每张图片显示15%的动画时间，切换占5%时间 */
    0%, 15% { transform: translateX(0); }     
    20%, 35% { transform: translateX(-20%); } 
    40%, 55% { transform: translateX(-40%); } 
    60%, 75% { transform: translateX(-60%); } 
    80%, 95% { transform: translateX(-80%); } 
    100% { transform: translateX(0); }        /* 复位到第1张 */
}
  /* 悬停时暂停指示器动画 */
.slides:hover{
    animation-play-state: paused;
}
